<template>
  <div class="app-container">
<!--搜索栏-->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item v-if="checkRole(['admin'])" label="创建者id" prop="eventUserId">
        <el-input
          v-model="queryParams.eventUserId"
          placeholder="请输入创建者id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="活动名称" prop="eventName">
        <el-input
          v-model="queryParams.eventName"
          placeholder="请输入活动名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="活动地点" prop="eventLocation">
        <el-input
          v-model="queryParams.eventLocation"
          placeholder="请输入活动地点"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="活动人数" prop="eventPeoples">
        <el-input
          v-model="queryParams.eventPeoples"
          placeholder="请输入活动人数"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开始时间" prop="eventStart">
        <el-date-picker clearable size="small"
          v-model="queryParams.eventStart"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="eventEnd">
        <el-date-picker clearable size="small"
          v-model="queryParams.eventEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动要求" prop="eventRequirement">
        <el-input
          v-model="queryParams.eventRequirement"
          placeholder="请输入活动要求"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="eventTypeId">
        <el-select  v-model="queryParams.eventTypeId" placeholder="活动类型">
          <el-option
            v-for="(item,index) in eventTypeOptions"
            :key="index"
            :label="item"
            :value="index+1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="eventStatus">
        <el-select
          v-model="queryParams.eventStatus"
          placeholder="活动状态"
          clearable
          size="small"
          style="width: 180px"
        >

          <el-option
            v-for="dict in dict.type.sys_event_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<!--操作栏-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['volunteer:event:add']"
        >发布</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['volunteer:event:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['volunteer:event:remove']"
        >撤销</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['volunteer:event:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
<!--表单表头-->
    <el-table  v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="活动名称" align="center" prop="eventName" />
      <el-table-column label="活动地点" align="center" prop="eventLocation" />
      <el-table-column label="活动人数" align="center" prop="eventPeoples" />
      <el-table-column label="已报名人数" align="center" prop="eventRdpeoples" empty-text="无"/>
      <el-table-column label="开始时间" align="center" prop="eventStart" width="180" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.eventStart, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="eventEnd" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.eventEnd, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动要求" align="center" prop="eventRequirement" :show-overflow-tooltip="true"  />
      <el-table-column label="状态" align="center" prop="eventStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_event_status" :value="scope.row.eventStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="eventCheck">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_check" :value="scope.row.eventCheck"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >详细</el-button>
            <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAudit(scope.row)"
            v-hasPermi="['volunteer:event:check']"
          >审核</el-button>

          <el-dropdown size="mini"  >
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-upload
                class="upload-demo"
                action="http://127.0.0.1/dev-api/volunteer/image/upload"
                :data="{eventId:scope.row.eventId}"
                :headers="headers"
                :show-file-list="false"
                :limit="1"
              >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-plus"
                >上传图片</el-button>

              </el-upload>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handleSign(scope.row)"
                v-hasPermi="['volunteer:user:report']"
              >报名</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 发布或修改活动信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="520px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="活动名称" prop="eventName">
          <el-input v-model="form.eventName" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动地点" prop="eventLocation">
          <el-input v-model="form.eventLocation" placeholder="请输入活动地点" />
        </el-form-item>
          <el-form-item label="事件类型" prop="eventTypeId">
              <el-select ref="test1" v-model="form.eventTypeId" placeholder="请选择">
                <el-option
                  v-for="(item,index) in eventTypeOptions"
                  :key="index"
                  :label="item"
                  :value="index+1"
                ></el-option>
              </el-select>
            </el-form-item>
        <el-form-item label="活动人数" prop="eventPeoples">
          <el-input v-model="form.eventPeoples" placeholder="请输入活动人数" />
        </el-form-item>
        <el-form-item label="开始时间" prop="eventEnd">
          <el-date-picker clearable size="small"
                          v-model="form.eventStart"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="eventEnd">
          <el-date-picker clearable size="small"
            v-model="form.eventEnd"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动要求" prop="eventRequirement" >
          <el-input type="textarea" v-model="form.eventRequirement" placeholder="请输入活动要求" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
<!--    展示活动信息-->
    <el-dialog  title="活动详细" :visible.sync="openView" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.sysEventType" label="活动类型:">{{form.sysEventType.typeName}}</el-form-item>
            <el-form-item label="活动名称:">{{ form.eventName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间:">{{ form.eventStart }}</el-form-item>
            <el-form-item label="结束时间:">{{ form.eventEnd }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动人数:">{{ form.eventPeoples}}</el-form-item>
            <el-form-item label="活动要求:" >{{ form.eventRequirement }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已报名人数:">{{ form.eventRdpeoples }}</el-form-item>
            <el-form-item label="活动图片:">
              <el-image style="width: 100%;height:100%" fit="scale-down"
                        :initial-index="0"
                        :src="srcList[0]"
                        :preview-src-list="srcList">
                <template slot="error">
                  <el-image style=" width:100%;height: 100%"
                            src="https://s3.bmp.ovh/imgs/2022/04/03/dd0bb97b2a9bf8b0.png"
                  ></el-image>
                </template>
              </el-image>

            </el-form-item>

          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listEvent, getEvent, delEvent, addEvent, updateEvent, checkSuccess, checkFail} from "@/api/volunteer/event";
import {getInfo} from "../../../api/login";
import {check_ok, reportUserEvent} from "../../../api/volunteer/user";
import {listType} from "@/api/volunteer/type";
import log from "@/views/monitor/job/log";
import axios from "axios";
import {getToken} from "@/utils/auth";
import {checkRole} from "@/utils/permission";

export default {
  name: "Event",
  dicts: ['sys_event_status','sys_check'],
  data() {
    return {
      //上传图片请求头
      headers:{
        Authorization:"Bearer" + ' ' +getToken()
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 活动信息表格数据
      eventList: [],
      //事件类型
      eventTypeOptions:[],
      //图片列表
      srcList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否显示详细弹出层
      openView:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // createBy: null,
        // eventUserId: null,
        eventName: null,
        eventLocation: null,
        eventPeoples: null,
        eventStart: null,
        eventEnd: null,
        eventStatus: null,
        TypeName:null,
        eventTypeId:null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        eventName:{
          required:true
        },
        eventLocation:{
          required:true
        },
        eventRdpeoples: {
          required:true
        },
        eventStart:{
          required:true
        },
        eventEnd:{
          required:true
        }
      },
      userId : "",
      eventId : "",
    };
  },
  created() {
    //获取事件类型

    this.getTypeOptions();
    this.getList();
  },
  methods: {
    addImg(val){
      this.srcList=[]
      this.srcList.push(val)
    },
    //检验超级管理员admin权限
    checkRole,
    /** 查询活动信息列表 */
    getList() {
      this.loading = true;
      listEvent(this.queryParams).then(response => {
        console.log('活动数据',response.rows)
        this.eventList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取发布中的事件类型*/
      getTypeOptions(){
      listType().then((response)=>{
        console.log('响应',response)
        let options=response.rows.map(obj=>{return obj.typeName})
        this.eventTypeOptions=options
      })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        eventId: null,
        eventUserId: null,
        eventName: null,
        eventLocation: null,
        eventPeoples: null,
        eventStart: null,
        eventEnd: null,
        eventStatus: "0",
        eventRequirement: null,
        eventCheck: null,
        eventRdpeoples: null,
        eventImg: null,
        eventTypeId:null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.eventId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 发布按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加活动信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const eventId = row.eventId || this.ids
      getEvent(eventId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改活动信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.eventId != null) {
            updateEvent(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            getInfo().then((r)=>{
              //将创建者id传给后端
              this.form.eventUserId=r.user.userId
              addEvent(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            })
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const eventIds = row.eventId || this.ids;
      this.$modal.confirm('是否确认删除活动信息编号为"' + eventIds + '"的数据项？').then(function() {
        return delEvent(eventIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('volunteer/event/export', {
        ...this.queryParams
      }, `event_${new Date().getTime()}.xlsx`)
    },
    /** 详细按钮 */
    handleView(row) {
      getEvent(row.eventId).then(response => {
        this.srcList.shift()
        this.srcList.push(response.data.eventImg)
        this.form = response.data;
        this.openView = true;
        })
    },
    /** 活动审核按钮*/
    handleAudit(row){
      this.$confirm('是否审核通过活动'+row.eventName+'?','提示',{
        confirmButtonText:'通过',
        cancelButtonText:'不通过',
        type:'warning'
      }).then(()=>
      {
        checkSuccess(row.eventId).then(()=>{
          this.getList()
          this.$modal.msgSuccess("审核通过");
        })
      })
        .catch(()=>{
         checkFail(row.eventId).then(()=>{
           this.getList()
           this.$modal.msgError("审核不通过")
         })
        }
        )
    },

    /**
     * 报名活动操作
     */
    handleSign(row) {
      console.log('参数row',row)
      getInfo().then(response => {
        console.log('re',response.data)
        return response.user
      }).then((data) => {
        this.$data.userId = data.userId
      });
      this.$confirm('是否报名活动' + row.eventName + '?','提示',{
        confirmButtonText:'是',
        cancelButtonText:'否',
        type:'warning'
      }).then(
        () => {
          //报名
         reportUserEvent(row.eventId,this.$data.userId).then((response)=>{
           this.getList()
           this.$modal.msgSuccess('报名成功')
         })})
    }}}

</script>

